<template>
  <Panel tite="管理员信息">
    <div class="box">
      <div class="run">
        管理员ID: <span>{{ user.id }}</span>
      </div>
      <el-divider></el-divider>
      <div class="account">
        账号: <span>{{ user.account }}</span>
      </div>
      <el-divider></el-divider>
      <div class="user">
        用户组: <span>{{ user.userGroup }}</span>
      </div>
      <el-divider></el-divider>
      <div class="latel">
        创建时间: <span>{{ user.ctime | formaDate }}</span>
      </div>
      <el-divider></el-divider>
      <div class="flexx">
        <p class="portrait">管理员头像:&emsp;</p>
        <el-upload
          class="avatar-uploader"
          :action="BASE_URL+ '/users/avatar_upload'"
          :on-success="success"
          :before-upload="beforeUpload"
        >
          <img 
            v-if="user.imgUrl" :src="BASE_URL + user.imgUrl"
            alt=""
            :style="{ width: '100px', height: '100px' }"
          />
        </el-upload>
      </div>
    </div>
  </Panel>
</template>
<script>
// 引入工具层axios
// import axios from "@/utlis/request.js";

// 引入接口层usersInfo
import { avatareditReq, usersInfo } from "@/api/account.api.js";

import dayjs from "dayjs";

import {BASE_URL} from "@/utlis/commom.js"

export default {
  data() {
    return {
      BASE_URL,
      user: [],
      tupianType: ["image/png", "image/jpg", "image/jpeg"],
    };
  },
  methods: {
   async getUserInfo() {
    
      const res = await usersInfo();
      this.user = res.data;
      
    },
    // 图片上传前的判断
    beforeUpload(file) {
      console.log(file);

      return this.tupianType.includes(file.type) && file.size / 1024 <= 20;
    },
    success(response) {
      console.log(response);
      let imgUrl = response.imgUrl.split("/").pop();
      // console.log(imgUrl);

      // 修改数据库的头像地址
      avatareditReq(imgUrl).then((res) => {
        // console.log(res);
          this.getUserInfo()
          this.$bus.$emit('uploadImg')
      });
    },
  },

created() {
    this.getUserInfo()
  },

  filters: {
    formaDate(date) {
      let str = dayjs(date).format("YYYY/MM/DD");
      return str;
      // let str =  dayjs(new Date()).format("YYYY/MM/DD HH:mm:ss");
      // return str;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 380px;
  .run {
    height: 50px;
    line-height: 50px;
  }
  .account {
    height: 50px;
    line-height: 50px;
  }
  .user {
    height: 50px;
    line-height: 50px;
  }
  .latel {
    height: 50px;
    line-height: 50px;
  }
  .flexx {
    height: 180px;
    display: flex;
    align-items: center;

    .portrait {
      height: 180px;
      line-height: 180px;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      display: block;
      
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>